<template>
	<view :class="themeName">
		<navbar title="满赠活动"></navbar>
		<view class="give-full-activity">
			<view style="height: 20px;"></view>
			<view class="header u-flex-wrap u-col-top">
				<view class="flex row-between" style="width: 100%;" v-if="showCountDown">
					<text class="m-r-10 xl bold">{{$zhTran('满就赠')}}</text>
					<view>
						<text class="m-r-10">{{$zhTran('距离结束')}}</text>
						<u-count-down :timestamp="getCountDownSegment(actInfo.time_end)" :font-size="26" color="#ffffff"
							:separator-size="26" separator-color="#000" separator="zh" :show-border="true"
							border-color="rgba(255, 44, 60, 1)" bg-color="rgba(255, 44, 60, 1)"
							@end="showCountDown = false" />
					</view>
				</view>
				<view class="m-t-10" style="width: 100%;">
					{{$zhTran('满'+(actInfo.condition_type==1?actInfo.condition_count+'件':actInfo.condition_money+'元')+'送赠品，赠完为止')}}
				</view>
				<text class="muted" v-if="actInfo.use_goods_type == 1">{{$zhTran('-全场商品皆参与赠送')}}</text>
				<block v-else>
					<text class="muted line-1 m-t-10" v-for="(item,idx) in showGoodsList"
						:key="idx">-{{item.name}}</text>
					<text class="muted m-t-10" v-if="showGoodsCount > 10">...</text>
				</block>
			</view>

			<!-- 搜索 -->
			<u-sticky offset-top="0" h5-nav-height="0">
				<view class="search-input m-t-20">
					<u-search class="flex-1" v-model="search.keyword" height="72" bg-color="#fff" :show-action="false"
						:placeholder="$zhTran('请输入要搜索的商品')" @search="handleSearch" />
				</view>
			</u-sticky>
			<!-- 搜索 -->

			<!-- 商品 -->
			<mescroll-body ref="mescrollRef" :up="{
				  auto: true,
				  noMoreSize: 10,
				  empty: {
					icon: $getImageUri('resource/image/shopapi/uniapp/empty/shop.png'),
					tip: $zhTran('没有找到商品~'),
					fixed: true,
				  },
				}" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view :class="['goods-container', `goods-container-${goodsCardStyle}`]">
					<view class="goods-item" @click.native="goGoodsDetail(item.id)" v-for="item in goodsList"
						:key="item.id">
						<goods-card :shape="goodsCardStyle" :name="item.name" :image="item.image"
							:price="item.sell_price" :goods_model="item.goods_model" :goods_code="item.code"
							:goods_stock="item.total_stock" :minPrice="item.lineation_price"
							:fieldShowHide="fieldShowHide" :fieldStyles="fieldStyles" :prefix="price_symbol"
							:spec_id="item.spec_id" :spec_type="item.spec_type" :spec_value="item.spec_value"
							:spec_value_list="item.spec_value_list" :tag_desc="item.tag_desc" />
					</view>
				</view>
			</mescroll-body>

			<!-- 功能按钮组 -->
			<view class="functions">
				<view class="icon-group">
					<view class="icon-item" @tap="goHomePage">
						<u-icon name="home" size="42" />
						<text>{{$zhTran('首页')}}</text>
					</view>
					<view class="icon-item" @tap="goService">
						<u-icon name="kefu-ermai" size="42" />
						<text>{{$zhTran('客服')}}</text>
					</view>
				</view>
				<view class="button-group">
					<view class="button-item button-item--cart" @click="goCart">{{$zhTran('去购物车')}}</view>
				</view>
			</view>

			<!-- 页面状态 -->
			<page-status :status="pageStatus">
				<template #error>
					<u-empty :text="$zhTran('活动已结束')"
						:src="$getImageUri('resource/image/shopapi/uniapp/empty/order.png')" :icon-size="280"></u-empty>
				</template>
			</page-status>
		</view>
	</view>
</template>

<script>
	import {
		apiGetPage
	} from "@/api/store";
	import {
		apiGiveFullActiviryInfo,
		apiGiveFullActiviryGoodsList
	} from "@/api/give_full_activity";
	import {
		PageStatusEnum,
	} from "@/utils/enum";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";

	export default {
		name: "GiveFullActivity",
		mixins: [MescrollMixin],

		data() {
			return {
				pageStatus: PageStatusEnum["LOADING"],
				// 页面状态
				actInfo: {}, // 活动信息
				showCountDown: true, // 显示倒计时
				search: {
					keyword: '',
				},
				goodsCardStyle: "square", // 商品卡片样式: square -正方形; rectangle -长方形
				price_symbol: '￥',
				goodsList: [],
				fieldShowHide: {},
				fieldStyles: {},
				showGoodsList: [],
				showGoodsCount: 0

			};
		},

		computed: {},

		methods: {
			// 初始化Mescroll
			mescrollInit(mescroll) {
				console.log(mescroll);
				this.mescroll = mescroll;
			},
			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},

			// 上拉加载更多
			upCallback(page) {
				const pageNum = page.num;
				const pageSize = page.size;

				apiGiveFullActiviryGoodsList({
						...this.search,
						page_no: pageNum,
						page_size: pageSize,
					})
					.then(({
						lists,
						page_size,
						count,
					}) => {
						// 如果是第一页需手动置空列表
						if (page.num == 1) this.goodsList = [];
						if (page.num == 1) this.showGoodsList = [...lists];
						// 重置列表数据
						this.goodsList = [...this.goodsList, ...lists];
						this.goodsList = this.$zhTran(this.goodsList)
						this.showGoodsList = this.$zhTran(this.showGoodsList)
						// this.mescroll.endBySize(page_size, count)
						this.showGoodsCount = count
						this.mescroll.endSuccess(lists.length, count);
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},
			// 刷新订单数据
			refreshActivityData() {
				return apiGiveFullActiviryInfo({})
					.then((data) => {
						this.actInfo = this.$zhTran(data);
						return Promise.resolve(data);
					})
					.catch((err) => {
						return Promise.reject(err);
					});
			},
			// 跳转商品详情
			goGoodsDetail(id) {
				this.$Router.push({
					path: "/bundle2/pages/goods_detail/goods_detail",
					query: {
						id,
					},
				});
			},

			// 获取分类信息
			getCategoryInfo() {
				apiGetPage({
					type: 2,
				}).then((res) => {
					this.fieldShowHide = res.content[1].content
					this.fieldShowHide.show_cart_icon = 0
					this.fieldShowHide.show_gfa_flag = 1
					this.fieldStyles = res.content[1].styles
					delete this.fieldShowHide.data
				});
			},

			// 获取倒计时段
			getCountDownSegment(endTimestamp) {
				const startTimestamp = new Date().getTime() / 1000;
				if (endTimestamp - startTimestamp <= 0) this.showCountDown = false;
				return endTimestamp - startTimestamp;
			},

			// 搜索
			handleSearch(value) {
				this.$set(this.search, "keyword", value);
				this.mescroll && this.mescroll.resetUpScroll();
			},

			// 去首页
			goHomePage() {
				this.$Router.push({
					path: "/pages/index/index",
					query: {
						type: "normal",
					},
				});
			},

			// 去客服
			goService() {
				this.$Router.push({
					path: "/bundle/pages/service/service",
					query: {
						type: "normal",
					},
				});
			},

			// 去购物车
			goCart() {
				this.$Router.replaceAll({
					path: "/bundle2/pages/shop_cart/shop_cart",
				});
			},

		},

		async onLoad() {
			const options = this.$Route.query;

			this.getCategoryInfo()
			try {
				await this.refreshActivityData()
				await this.handleSearch("");
				this.pageStatus = PageStatusEnum["NORMAL"];
			} catch (err) {
				console.log(err);
				this.pageStatus = PageStatusEnum["ERROR"];
			}
		},

		onUnload() {},
	};
</script>

<style lang="scss" scoped>
	.give-full-activity {
		padding: 0 20rpx calc(100rpx + 20rpx + constant(safe-area-inset-bottom)) 20rpx;
		padding: 0 20rpx calc(100rpx + 20rpx + env(safe-area-inset-bottom)) 20rpx;

		@include background_linear() background-size: 200vw 200rpx;
		background-repeat: no-repeat;

		.contain {
			margin-top: 20rpx;
			border-radius: 7px;
			background-color: #ffffff;
		}

		.header {
			border-radius: 7px;
			background-color: #FFFFFF;
			display: flex;
			min-height: 264rpx;
			padding: 20rpx;
		}

		.search-input {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			background-color: #ffffff;

			.search-action {
				width: 100rpx;
				text-align: center;
			}
		}
	}

	.goods-container {
		flex: 1;
		display: flex;

		&-square {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		&-rectangle {
			flex-direction: column;
		}

		.goods-item {
			margin-top: 16rpx;
		}
	}


	.functions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx constant(safe-area-inset-bottom) 24rpx;
		padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
		border-top: $-solid-border;
		background-color: #ffffff;

		.icon-group {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 268rpx;
			font-size: $-font-size-xxs;
			color: $-color-lighter;

			.icon-item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.button-group {
			flex: 1;
			display: flex;
			justify-content: space-between;
			@include background_linear();

			.button-item {
				flex: 1;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				margin-left: 14rpx;
				border-radius: 60px;
				color: #fff;
			}
		}
	}
</style>